<template>
  <div class="login">
    <div class="loginBox">
      <p class="title">个人资料</p>
      <mu-container>
        <mu-form ref="form" :model="validateForm" class="mu-demo-form">
          <mu-form-item prop="name" :rules="name" label="姓名">
            <mu-text-field v-model="validateForm.name" prop="name" placeholder="请输入姓名"></mu-text-field>
          </mu-form-item>

          <!--<mu-form-item prop="organization_id" :rules="organization_id" label="所属党组织">-->
            <!--<mu-select-->
              <!--filterable-->
              <!--v-model="validateForm.organization_id"-->
              <!--full-width-->
              <!--disabled-->
              <!--placeholder="请选择您的所属党组织"-->
            <!--&gt;-->
              <!--<mu-option v-for="item in orgs" :key="item.id" :label="item.name" :value="item.id"></mu-option>-->
            <!--</mu-select>-->
          <!--</mu-form-item>-->

          <mu-form-item prop="mz_id" :rules="mz_id" label="民族">
            <mu-select filterable v-model="validateForm.mz_id" full-width placeholder="请选择民族">
              <mu-option
                v-for="item in mz_ids"
                :key="item.id"
                :label="item.mzname"
                :value="item.id"
              ></mu-option>
            </mu-select>
          </mu-form-item>

          <mu-form-item prop="card_id" :rules="card_id" label="身份证号">
            <mu-text-field v-model="validateForm.card_id" prop="card_id" placeholder="请输入您的身份证号码"></mu-text-field>
          </mu-form-item>

          <mu-form-item prop="party_time" :rules="party_time" label="入党时间">
            <mu-date-input
              v-model="validateForm.party_time"
              container="bottomSheet"
              label-float
              full-width
              placeholder="请选择入党时间"
            ></mu-date-input>
          </mu-form-item>

          <mu-form-item prop="party_posts" :rules="party_posts" label="党内职务">
            <mu-select
              filterable
              v-model="validateForm.party_posts"
              full-width
              placeholder="请选择您的党内职务"
            >
              <mu-option v-for="item in party_postsN" :key="item" :label="item" :value="item"></mu-option>
            </mu-select>
          </mu-form-item>

          <mu-form-item prop="party_status" :rules="party_status" label="党员状态">
            <mu-select
              filterable
              v-model="validateForm.party_status"
              full-width
              placeholder="请选择您的党员状态"
            >
              <mu-option v-for="item in party_statusN" :key="item.index" :label="item.name" :value="item.index"></mu-option>
            </mu-select>
          </mu-form-item>

          <mu-form-item prop="edu" :rules="edu" label="学历">
            <mu-select filterable v-model="validateForm.edu" full-width placeholder="请选择您的党内职务">
              <mu-option v-for="item in edus" :key="item.index" :label="item.name" :value="item.index"></mu-option>
            </mu-select>
          </mu-form-item>

          <mu-form-item prop="password" :rules="password" label="设置登录密码">
            <mu-text-field
              v-model="validateForm.password"
              prop="password"
              placeholder="(6-20位),数字或者字母"
            ></mu-text-field>
          </mu-form-item>
        </mu-form>
      </mu-container>

      <div class="sign">
        <img v-if="valid()" src="@as/img/tijiao_moren@2x.png">

        <img v-if="!valid()" src="@as/img/tijiao@2x.png" alt @click="submit()">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: [{ validate: val => !!val, message: "请输入姓名" }],
      password: [
        { validate: val => !!val, message: "必须填写密码" },
        {
          validate: val => /^[a-zA-Z0-9]{6,20}$/.test(val),
          message: "密码为长度大于6小于20位的数字或字母"
        }
      ],
      organization_id: [
        { validate: val => !!val, message: "请选择您所属的党组织" }
      ],
      mz_id: [{ validate: val => !!val, message: "请选择民族" }],
      card_id: [
        { validate: val => !!val, message: "请输入您的身份证号码" },
        {
          validate: val => /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val),
          message: "身份证不合法"
        }
      ],
      party_time: [{ validate: val => !!val, message: "请选择入党时间" }],
      party_posts: [{ validate: val => !!val, message: "请选择您的党内职务" }],
      party_status: [{ validate: val => !!val, message: "请选择您的党员状态" }],
      edu: [{ validate: val => !!val, message: "请选择学历" }],

      //   argeeRules: [{ validate: val => !!val, message: "必须同意用户协议" }],
      validateForm: {
        phone: this.$route.query.phone,
        password: "",
        name: "",
        organization_id: "",
        mz_id: "",
        card_id: "",
        party_time: "",
        party_posts: "",
        party_status: "",
        edu: "",
        party_status: ""
      },

      orgs: [],
      mz_ids: [],
      party_postsN: [
        "党委书记",
        "党委副书记",
        "党委常委",
        "党委委员",
        "纪委书记",
        "纪委副书记",
        "纪委委员",
        "党总书记",
        "党总支部副书记",
        "党总支委员",
        "党总支组织委员",
        "党总支宣传委员",
        "党总支纪检委员",
        "党支部书记",
        "党支部副书记",
        "党支部委员",
        "党支部组织委员",
        "党支部宣传委员",
        "党支部纪检委员",
        "党支部青年委员",
        "职工"
      ],

      edus: [
        { name: "小学", index: "1" },
        { name: "初中", index: "2" },
        { name: "高中", index: "3" },
        { name: "专科", index: "4" },
        { name: "本科", index: "5" },
        { name: "硕士研究生", index: "6" },
        { name: "博士研究生", index: "7" }
      ],
      party_statusN: [
        { name: "在职", index: "1" },
        { name: "流动", index: "2" },
        { name: "挂靠", index: "3" },
        { name: "离职", index: "4" },
        { name: "预备党员", index: "5" },
        { name: "积极分子", index: "6" }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$http.get("/applets/Register/search_org").then(res => {
        this.orgs = [...res.data];
      });

      this.$http.get("/app/Registered/get_mz", {}).then(res => {
        this.mz_ids = [...res.data];
      });
       this.$progress.done();
       // console.log(this.$route.query.org_id)
       this.validateForm.organization_id =this.$route.query.org_id

    },

    valid() {
      for (let i in this.validateForm) {
        if (this.validateForm[i] == "") {
          return true;
        }
      }
    },

    submit() {
      this.$refs.form.validate().then(vaild => {
        this.validateForm.party_time =
          new Date(this.validateForm.party_time).getTime() / 1000;
        if (vaild) {
          this.$http
            .post("/applets/Register/register", {
              ...this.validateForm,
              type: this.$route.query.type
            })
            .then(res => {
              this.$toast.success(res.msg);
              this.$router.push({ path: "/login" });
            });
        }
        this.validateForm.party_time = this.validateForm.party_time*1000
      });
    },
    clear() {
      this.$refs.form.clear();
      this.validateForm = {
        name: ""
      };
    }
  }
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  display: flex;
  justify-content: center;
  // border:1px solid #000
}
.seach {
  p {
    font-size: 15px;
    color: rgba(0, 0, 0, 0.54);
  }
}
.title {
  font-size: 36px;
  margin-top:50px;
  margin-bottom: 60px;
  font-weight: Medium;

}

.loginBox {
  width: 85%;
  //  border:1px solid #000
}
.mu-demo-form {
  width: 100%;
  max-width: 460px;
  //  border:1px solid #000
}

.solid {
  border-left: 1px solid #eee !important;
  height: 15px;
  width: 0px;
  margin: 10px;
}

.sign {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  margin-bottom: 400px;

  div {
    width: 125px;
    border: 1px solid rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
  }
  p {
    font-size: 12.5px;
    color: #f47548;
  }

  img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
  }
}
</style>